<template>
 <div>
  <div class="card-header">
   <span>{{title}}</span>
   <svg t="1652088714663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1894" width="16" height="16"><path d="M512 912c-220.914 0-400-179.086-400-400S291.086 112 512 112s400 179.086 400 400-179.086 400-400 400z m-44-407v150c0 24.852 20.148 45 45 45s45-20.148 45-45v-150c0-24.852-20.148-45-45-45S468 480.148 468 505z m0-132v1c0 24.852 20.148 45 45 45S558 398.852 558 374v-1c0-24.852-20.148-45-45-45S468 348.148 468 373z" p-id="1895" fill="#bfbfbf"></path></svg>
  </div>
  <div class="card-content">
   {{count}}
  </div>
  <div class="card-charts">
   <slot name="charts"></slot>
  </div>
  <div class="card-footer">
   <slot name="footer"></slot>
  </div>
 </div>
</template>
<script>
export default {
 name:'',
 props:['title','count'],
 data(){
  return {

  }
 }
}
</script>
<style>
.card-header{
 display: flex;
 justify-content: space-between;
 color: #d9d9d9;
 font-size: 10px;
}
.card-content{
 font-size: 20px;
 padding: 10px 0px;
}
.card-charts{
 height: 40px;
}
.card-footer{
    border-top: 1px solid #eee;
    padding-top:10px ;
}

</style>